<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/newbase.css">
    <script src="__STATIC__/js/jquery-1.8.2.js"></script>
    <title>发表评论</title>
    <script>
        $(function () {
            var h=$(".photo li").width();
            $(".fileInputContainer").css({height:h+"px"});
            $(".fileInput").css({height:h+"px"});
        })
    </script>
{include file="public/href" /}
</head>
<body>
<div class="wrap-rew">
    <div class="header">
        <p>发表评论</p>
        <img src="__STATIC__/img_user/back.png" class="back" onclick=window.location.href="{:url('mobile/user_info/member_order')}?status={:input('status')}&title={:input('title')}">
    </div>
    <div class="main">
        <img src="/{$goods_info.thumb_img}" onerror=this.src='/static/mobile/img/empty_img.png'>
        <div>
            <span>满意度评价：</span>
            <div class="star">
                <div id="starttwo" class="block clearfix">
                    <div class="star_score"></div>
                    <div class="fenshu" hidden></div>
                </div>
                <script type="text/javascript" src="__STATIC__/js/star.js"></script>
                <script>
                    scoreFun($("#startone"))
                    scoreFun($("#starttwo"), {
                        fen_d: 24,//每一个a的宽度
                        ScoreGrade: 5//a的个数 10或者
                    })
                </script>
            </div>
        </div>
    </div>
    <div class="center">
        <textarea id="content" placeholder="亲，留下你的评价吧～"></textarea>
    </div>
    <div>
        <h4>添加截图</h4>
        <ul class="photo">

            <li id="btn" style="height: 70px;width: 70px;margin-bottom: 5px;"><img src="__STATIC__/img_user/pl-tupian.png">
            </li>
            <ul id="ul_pics"></ul>
            <div id="img2"><input name='picArr' id="picArr[]" type='hidden' value=''></div>
            <div class="cl"></div>
        </ul>
    </div>
    <div class="footer">
        <div class="all">
            <div class="total">
                <span class="settle" onclick="appraise()">   评价   </span>
            </div>
        </div>
    </div>
</div>
{include file="public/src" /}
<script type="text/javascript" src="/static/plupload/plupload.full.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.star_score').children('a:last-child').addClass('clibg');
        $('.fenshu').text(5);
    })
    $(window).resize(function(){
        $('.footer').toggle();
    });
    var uploader = new plupload.Uploader({
        runtimes: 'html5,flash,silverlight,html4',
        browse_button: 'btn',
        url: "{:url('user_info/uploadImg')}",
        flash_swf_url: '__STATIC__/wap/js/plupload/Moxie.swf',
        silverlight_xap_url: '__STATIC__/wap/js/plupload/Moxie.xap',
//        filters: {
//            max_file_size: '2048kb',
//            mime_types: [
//                {title: "files", extensions: "jpg,png,gif,jpeg,PNG,JPG,JPEG,GIF"}
//            ]
//        },
        multi_selection: true,
        init: {
            FilesAdded: function (up, files) {

                if ($("#ul_pics").children("li").length > 7) {
                    layer.msg("您上传的图片太多了！");
                    uploader.destroy();
                } else {
                    var li = '';
                    plupload.each(files, function (file) {
                        li += "<li id='1" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
                    });
                    $("#ul_pics").append(li);
                    uploader.start();

                }
            },
            UploadProgress: function (up, file) {
                var percent = file.percent;
                $("#1" + file.id).find('.bar').css({"width": percent + "%"});
                $("#1" + file.id).find(".percent").text(percent + "%");
            },
            FileUploaded: function (up, file, info) {
                if ($("#ul_pics").children("li").length >= 7) {
                    layer.open({content:"最多只能上传6张图片！",skin:'msg',time:2});
                    $("#1" + file.id).remove('');
                    return false;
                    uploader.destroy();
                }
                document.getElementById('img2').innerHTML = '';

//                        var data = JSON.parse(info.response);
                var data = eval("(" + info.response + ")");
                $("#1" + file.id).html("<img style='height: 70px;width: 70px;float: left;margin-bottom: 10px;' src='/" + data.picUrl + "'/><input name='picArr' id='picArr[]' type='hidden' value='" + data.picUrl + "'><a style='float: right;margin-top:-5px;position:absolute;margin-left: -10px; ' onclick=img_del('1" + file.id + "','" + data.picUrl + "','{:url(\'user_info/uploadImgDestroy\')}')><img style='height: 10px; width: 10px;' src='/static/console/images/icon21.png'/></a>");
            },
            Error: function (up, err) {
                layer.msg('服务器异常,请重新上传');
            }
        }
    });
    uploader.init();
    // 取消上传图片
    function img_del(id, picUrl, url) {

        $.ajax({
            url: url,
            type: 'post',
            dataType: 'json',
            data: {picUrl: picUrl},
            async: true,
            success: function (data) {
                if (data.code == '200') {
                    $("#" + id).remove('');
                    layer.open({content:data.message,skin:'msg',time:2});
                } else {
                    layer.open({content:data.message,skin:'msg',time:2});
                    return false;
                }
            },
            error: function () {
                layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
            }
        });
    }
    // 评价提交
    function appraise() {

        var content = $('#content').val();
        var star = $('.fenshu').text();
        var pic = document.getElementsByName("picArr");
        var picArr = '';
        if (pic) {
            $("input[name='picArr']").each(function () {
                picArr += $(this).val()+'|';
            });
            picArr = picArr.substr(0,picArr.length-1);
        } else {
            picArr = '';
        }

        if (!star) {
            layer.open({content:'您还未选择评分数',skin:'msg',time:2});
            return false;
        }
        content.trim();
        if (content==" ") {
            layer.open({content:'您的评价不能为空',skin:'msg',time:2});
            return false;
        }

        $.ajax({
            url: '',
            type: 'post',
            dataType: 'json',
            data: {
                content: content,
                grade: star,
                picArr: picArr.split('|'),
            },
            success: function (data) {

                if (data.code == '200') {
                    layer.open({content:data.message,skin:'msg',time:2});
                    setTimeout(function () {
                        location.href = sessionStorage.getItem('evaluate_back_url');
                    }, 2000);
                } else {
                    layer.open({content:data.message,skin:'msg',time:2});
                    return false;
                }
            },
            error: function () {
                layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
            }
        });
    }
</script>
</body>
</html>